<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大转盘</title>
    <link rel="stylesheet" href="<%=basePath%>zhuanpan/css/common_mobile.css?version=1.0.0">
    <link rel="stylesheet" href="<%=basePath%>zhuanpan/css/index.css?version=1.0.0">
    <!-- 移动端适配 -->
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 10 + 'px';
        }
    </script>
</head>

<body>
<div id="wrap">
    <div class="caidai"></div>
    <div class="header clearfix">
        <p class="rule fr">规则</p>
        <a href="../my.html" id="myWin">
          <!--   <p class="my fr">我的奖品</p> -->
        </a>
        <div class="title"></div>
    </div>     
    <!--轮盘-->
    <div class="rotate">
        <div class="lunpai">
            <ul class="prize running">
                <li>
                    <span></span>
                    <p>8元购物金</p>
                </li>
                <li>
                    <span></span>
                    <p>26元购物金</p>
                </li>
                <li>
                    <span></span>
                    <p>谢谢参与</p>
                </li>
                <li>
                    <span></span>
                    <p>16元购物金</p>
                </li>
                <li>
                    <span></span>
                    <p>66元购物金</p>
                </li>
                <li>
                    <span></span>
                    <p>6元购物金</p>
                </li>
            </ul>
        </div>
        <div class="ring"></div>
        <div id="btn"></div>
    </div>
    <div class="border">
        您今日还有 <span id="change"> ${flag} </span> 次抽奖机会
    </div>
    <!--游戏规则弹窗-->
    <div id="mask-rule">
        <div class="box-rule">
            <span class="star"></span>
            <h2>活动规则说明</h2>
            <span id="close-rule"></span>
            <div class="con">
                <div class="text">
                    <p>1.点击转盘可随机获得话费红包</p>
                </div>
            </div>
        </div>
    </div>
    <!--中奖提示-->
    <div id="mask">
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <div class="red-head"></div>
            <div class="red-body">
                <!-- 中奖奖品 -->
                <p class="gift_key"></p>

            </div>
            <div id="card">
                <a href="" target="_self" class="win"></a>
            </div>
            
            <a href="" target="_self" class="btn"></a>
            <span id="close"></span>
        </div>
    </div>
</div>

<script src="<%=basePath%>zhuanpan/js/jquery.min.js"></script>
<script src="<%=basePath%>zhuanpan/js/jquery.rotate.js"></script>
<script src="<%=basePath%>zhuanpan/js/h5_game_common.js?version=1.0.0"></script>
<script>
$(function () {
    var tips = ["8元购物金", "26元购物金", "谢谢参与", "66元购物金", "6元购物金","16元购物金"], //中奖提示
        $ring = $(".ring"),
        $prize = $(".prize"), //转盘
        $btn = $("#btn"), //按钮
        $change = $("#change"), //显示剩余抽奖机会
        $li = $(".scroll li"), //中奖信息滚动的盒子
        $sNum = $(".start-num"), //手机头号，三位数
        $eNum = $(".end-num"), //手机尾号，四位数
        $info = $(".info"), //中奖提示信息
        Count = 1, //後台剩餘次數更新
        data = {
            count: Count
        }, //次数
        bool = false, //判断是否在旋转，true表示是，false表示否
        timer; //定时器
    phone_num = '${mobile}'; //手機號
    ParentId = '${parentid}'; //代理商ID
    call = 0; //抽中話費
    shop = 0; //抽中購物金
    userid = '${userid}';

    init();

    function init() {
        timer = setInterval(function () {
            $ring.toggleClass("light");
        }, 1000);
    }

    //点击抽奖
    $btn.click(function () {
        if (bool) return; // 如果在执行就退出
        bool = true; // 标志为 在执行
        data.count--;
        if (data.count <= -1) {
        	data.count = 0;
        }
        $change.html(data.count); //显示剩余次数
        $prize.removeClass("running");
        clickFn();
    });

    //随机概率
    function clickFn() {
        //data为随机出来的结果，根据概率后的结果
        //概率控制
        var Prob = Math.round(Math.random() * 100); //随机获取100之内的任意一个整数；
        var data = Prob;
        console.log(Prob);
        if (Prob <= 50) {
            data = 2; //1元50%
        } else if (Prob > 50 && Prob <= 60) {
            data = 5; //谢谢参与10%
        } else if (Prob > 60 && Prob <= 80) {
            data = 1; //2元20%
        } else if (Prob > 80 && Prob <= 90) {
            data = 4; //3元10%
        } else if (Prob > 90 && Prob <= 97) {
            data = 6; //4元7%
        } else data = 3; //5元3%
        console.log(data);
        switch (data) { //中奖概率，可控。根据得到的随机数控制奖品
            case 1:
                rotateFn(1, 0, tips[0]); //2元 √
                call = 8;
                break;
            case 2:
                rotateFn(2, 60, tips[4]); //1元
                call = 6;
                break;
            case 3:
                rotateFn(3, 120, tips[3]); //5元 √
                call = 66;
                break;
            case 4:
                rotateFn(4, 180, tips[5]); //3元
                call = 16;
                break;
            case 5:
                rotateFn(5, 240, tips[2]); //谢谢参与 √
                call = 0;
                break;
            case 6:
                rotateFn(6, 300, tips[1]); //4元 √
                call = 26;
                break;
        }
    }

    //选中函数。参数：奖品序号、角度、提示文字
    function rotateFn(awards, angle, text) {
        /*手机号的处理
        var arr = [13477735912, 13100656035, 15926909285];
        var a = arr[0] + "";
        var f = a.substr(0, 3);
        var l = a.substr(7, 4);*/
        bool = true;
        $prize.stopRotate();
        $prize.rotate({
            angle: 0, //旋转的角度数
            duration: 4000, //旋转时间
            animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转。也就是至少转4圈
            callback: function () {
                bool = false; // 标志为 执行完毕
                win();
                show(1, 1, text);
            }
        });
    }

    //中奖信息滚动。前两个参数为手机号前三位和后四位手机尾号，text为抽中的奖品
    function show(sNum, eNum, text) {
        $(".gift_key").html(text);
    }

    //中奖信息提示
    $("#close,.win,.btn").click(function () {
        $prize.addClass("running");
        init();
    });
});
//中獎請求
function gift() {
    $.ajax({
        url: "sAdventures",
        type: "POST",
        dataType: "json",
        data: {
            agentid: ParentId,
            userid: userid,
            call: 0,
            shop: call
        },
        success: function (data) { //请求成功完成后要执行的方法
        	if (data.errorCode != 2000) {
        		$(".gift_key").html(data.data);
        	}
            console.log(data);
        }
    });
}
</script>
</body>
</html>